<template>
  <div class="shibie-box">
    <el-row :gutter="20" class="elheader">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 23px">单图片识别</span>
            </div>
            <input
              type="file"
              style="display: none"
              ref="ref1"
              @change="onFileChange"
            />
            <!-- `checked` 为 true 或 false -->
            <el-checkbox class="checkbox" v-model="checked" :disabled="state[0]||bool[0]"></el-checkbox>
            <p style="margin-top: -30px;margin-left: 80px;">裁剪图片</p>
            <el-button
              type="success"
              size="mini"
              @click="fun"
              :disabled="bool[0]"
              plain
              round
              style="margin-left: 47px;margin-top: -30px;"
              

              >{{ state[0] ? "关闭识别" : "选择图片" }}</el-button
            >
          </el-card>
        </div>
      </el-col>
      <el-col :span="6" style="margin-left: -30px">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 23px">批量识别与分类</span>
            </div>
            <input
              type="file"
              multiple
              ref="ref2"
              style="display: none"
              @change="onFileChanges"
            />
            <el-button
              type="success"
              size="mini"
              @click="fun2"
              :disabled="bool[1]"
              plain
              round
              style="margin-left: 47px;margin-top: 17px;"
              >{{ state[1] ? "关闭识别" : "选择文件" }}</el-button
            >
          </el-card>
        </div>
      </el-col>
      <el-col :span="6" style="margin-left: -30px">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 23px">拍照识别</span>
            </div>
            <el-button
              type="success"
              size="mini"
              @click="fun3"
              :disabled="bool[2]"
              plain
              round
              style="margin-left: 35px;margin-top: 17px;"
              >{{ state[2] ? "关闭识别" : "打开摄像头" }}</el-button
            >
          </el-card>
        </div>
      </el-col>
      <el-col :span="6" style="margin-left: -30px">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 23px">实时识别</span>
            </div>
            <el-button
              type="success"
              size="mini"
              @click="fun4"
              :disabled="bool[3]"
              plain
              round
              style="margin-left: 35px;margin-top: 17px;"
              >{{ state[3] ? "关闭识别" : "打开摄像头" }}</el-button
            >
          </el-card>
        </div>
      </el-col>
    </el-row>
    <avatar-cropper
      :dialogVisible.sync="dialogVisible"
      @closeAvatarDialog="closeAvatarDialog"
    ></avatar-cropper>

    <br /><br />
    <div class="box2" v-if="!flag">
      <div class="box3">
        <div>
          <img src="@/assets/shibie-1.png" class="shibie-img" />
        </div>
        <p class="box2-text">
          农业是人类衣食之源，生存之本，是一切生产的首要条件。
          它为国民经济其他部门提供粮食，副食品，工业原料，资金
          和出口物资。新时代，我国提出了三农政策，全面主力农业 农村和农民的发展
        </p>
      </div>
      <div class="box3">
        <div>
          <p class="box2-text-2">
            智能检测能够帮助农业生产，助力农业精细化，从而促进农业增产提质，通过智能检测检测病虫害及时了解农业发展状况，从而减小损失提高产量
          </p>
          <img src="@/assets/shibie-2.png" class="shibie-img-2" />
        </div>
      </div>
      <br /><br /><br /><br />
    </div>
    <div class="img-box" v-else>
      <router-view></router-view>
    </div>
    <br /><br /><br /><br />
  </div>
</template>
<script>
import avatarCropper from "@/components/avatarCropper";
export default {
  data() {
    return {
      checked: false,
      dialogVisible: false,
      avatar: "",
      flag: false,
      bool: [false, false, false, false],
      state: [false, false, false, false],
    };
  },
  components: {
    avatarCropper,
  },
  mounted() {
    // 是否在识别页（顶部菜单栏的识别），true代表是
    this.$store.commit("setMenuBar", true);
  },
  methods: {
    changeStatus(position) {
      //当前位置之外按钮禁用或取消禁用
      for (let i = 0; i < this.state.length; i++) {
        if (i != position) {
          // splice把position位置的元素替换成!this.state[position]
          this.bool.splice(i, 1, !this.bool[i]);
        }
      }
      //当前位置按钮状态改变，打开或关闭，目的是看着按钮显示的文字
      // splice把position位置的元素替换成!this.state[position]
      this.state.splice(position, 1, !this.state[position]);
    },
    //关闭弹窗时，即在弹窗点击确认时
    closeAvatarDialog(data) {
      // console.log(data);
      this.dialogVisible = false;
      let file = this.base64ToFile(data, "image");
      // console.log(file);
      if (file) {
        // 选择了图片
        this.avatar = URL.createObjectURL(file);
        this.$store.commit("avatar", this.avatar);
        this.$store.commit("setData", file);
        this.changeStatus(0);
        this.flag = true; //是否显示识别结果页
        this.$refs.ref1.value = ""; //清空input的value，避免重复选择，而选择不上
        this.$router.push("/shibie/shibieFile");
      }
    },
    base64ToFile(data, fileName) {
      const dataArr = data.split(",");
      const byteString = atob(dataArr[1]);
      const options = {
        type: "image/jpeg",
        endings: "native",
      };
      const u8Arr = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        u8Arr[i] = byteString.charCodeAt(i);
      }
      let file = new File([u8Arr], fileName + ".jpg", options); //返回文件流
      return file;
    },
    fun() {
      if (!this.state[0]) {
        //打开识别
        if (this.checked) {
          //勾选了图片裁剪
          //打开弹窗
          this.dialogVisible = true;
        } else {
          this.$refs.ref1.click(); // 模拟点击
        }
      } else {
        //关闭
        this.flag = false;
        // 清除存储的病害名称，用于查找病害详情
        this.$store.commit("setDisease", "");
        this.changeStatus(0);
      }
    },
    fun2() {
      if (!this.state[1]) {
        //打开识别
        this.$refs.ref2.click(); // 模拟点击
      } else {
        //关闭
        this.flag = false;
        // 清除存储的病害名称，用于查找病害详情
        this.$store.commit("setDisease", "");
        this.changeStatus(1);
      }
    },
    fun3() {
      this.changeStatus(2);
      if (this.state[2]) {
        //打开
        this.$store.commit("changeStatus", true); //摄像头状态，也是识别是否打开
        this.$router.push("/shibie/paizhao");
        this.flag = true;
      } else {
        //关闭
        // 清除存储的病害名称，用于查找病害详情
        this.$store.commit("setDisease", "");
        this.$store.commit("changeStatus", false); //摄像头状态，也是识别是否打开
        //关闭
        this.flag = false;
      }
    },
    fun4() {
      this.changeStatus(3);
      if (this.state[3]) {
        this.$store.commit("changeStatus", true); //摄像头状态，也是识别是否打开
        this.$router.push("/shibie/shishi");
        this.flag = true;
      } else {
        this.$store.commit("changeStatus", false); //摄像头状态，也是识别是否打开
        //关闭
        this.flag = false;
      }
    },

    // 在选择框中选择图片后触发的改变事件
    onFileChange(e) {
      // console.log(e)
      // 获取用户选择的文件列表（伪数组）
      const files = e.target.files;
      if (files.length > 0) {
        // 选择了图片
        this.avatar = URL.createObjectURL(files[0]);
        this.$store.commit("avatar", this.avatar);
        this.$store.commit("setData", files[0]);
        this.changeStatus(0);
        this.flag = true; //是否显示识别结果页
        this.$refs.ref1.value = ""; //清空input的value，避免重复选择，而选择不上
        this.$router.push("/shibie/shibieFile");
      }
    },
    //多个图片选择
    onFileChanges(e) {
      const files = e.target.files;
      if (files.length > 0) {
        this.$store.commit("setData", files);
        // console.log("===========================");
        // console.log(this.$store.state.imgs);

        this.changeStatus(1);
        this.flag = true; //是否显示识别结果页
        // e.target.value='';
        // this.$refs.ref2.value="";
        this.$router.push("/shibie/shibieFiles");
      }
    },
  },
};
</script>
<style scoped>
.title-childen {
  display: inline-block;
}
.title {
  font-size: 30px;
  /* margin-left: 60px; */
  color: rgb(0, 195, 49);
  width: 800px;
  /* position:fixed; */
  /* top:10px; */
}
.box {
  width: 1200px;
  height: 200px;

  /* background-color: #0080ff; */
}
.shibie-box {
  width: 1200px;
  /* height: 200px; */
  margin: auto;
  margin-top: -50px;
  /* background-color: rgb(255, 145, 0); */
}
.box-children {
  width: 230px;
  height: 140px;
  margin-right: 50px;
  background-color: rgb(249, 249, 249);
  float: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 20px;
}
.footer {
  width: 1200px;
  height: 250px;
  /* background-color: aquamarine; */
}
.box-button {
  width: 200px;
  height: 30px;
  float: right;
  margin-top: 50px;
  margin-right: 15px;
  /* margin: auto; */
  color: rgb(91, 137, 12);
  border-radius: 30px;
  background-color: rgb(235, 235, 235);
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);
}
.box-button2 {
  width: 200px;
  height: 30px;
  float: right;
  margin-top: 50px;
  margin-right: 15px;
  /* margin: auto; */
  color: rgb(91, 137, 12);
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
}
.font-style {
  font-size: large;
  text-align: center;
  color: rgb(39, 131, 74);
  margin-left: 58px;
  border: 0ch;
  display: inline;
}
.public {
  font-size: large;
  text-align: center;
  color: rgb(39, 131, 74);
  margin-left: 58px;
  border: 0ch;
  display: none;
  cursor: not-allowed;
}
.public2 {
  font-size: large;
  text-align: center;
  color: rgb(39, 131, 74);
  margin-left: 58px;
  border: 0ch;
  display: none;
  cursor: not-allowed;
}
.public3 {
  font-size: large;
  text-align: center;
  color: rgb(39, 131, 74);
  margin-left: 58px;
  border: 0ch;
  display: none;
  cursor: not-allowed;
}
.public4 {
  font-size: large;
  text-align: center;
  color: rgb(39, 131, 74);
  margin-left: 58px;
  border: 0ch;
  display: none;
  cursor: not-allowed;
}

.font-style2 {
  font-size: large;
  text-align: center;
  color: rgb(39, 131, 74);
  margin-left: 58px;
  border: 0ch;
  display: none;
}
/* .font-style2{
    font-size: large;
    text-align: center;
    color:rgb(39, 131, 74);
    margin-left: 58px;
    border: 0ch;
    display: none;
} */

.box2 {
  width: 1200px;
  /* height: 700px; */
  padding-top: 100px;
  background-color: rgb(251, 251, 251);
  /* float:left; */
}
.box3 {
  width: 1200px;
  height: 200px;
}
.shibie-img {
  width: 200px;
  height: 200px;
  /* border-radius: 80px; */
  margin-left: 200px;
  /* display: inline-block; */
  float: left;
  margin-top: -80px;
}
.shibie-img-2 {
  width: 200px;
  height: 200px;
  /* float:right; */
  /* margin-right: 10px; */
  float: left;
  margin-left: 110px;
}
.box2-text {
  margin-left: 100px;
  margin-top: -40px;
  width: 500px;
  /* height: 200px; */
  /* display: inline-block; */
  /* float:left; */
  float: left;
  font-size: 20px;
}
.box2-text-2 {
  width: 500px;
  /* height: 100px; */
  float: left;
  font-size: 20px;
  margin-left: 180px;
  margin-top: 30px;
}
.footer-childen {
  width: 1200px;
  /* height: 300px; */
  background-color: aquamarine;
  margin: auto;
  font-size: 30px;
}
.h2 {
  text-align: center;
}
.img-box {
  /* height:1900px; */
  /* height:1200px; */
}

.box-card {
  width: 240px;
  height: 150px;
  margin-left: 70px;
}
.footer {
  width: 1200px;
  /* height: 200px; */
  margin: auto;
}
.footer-img {
  width: 1200px;
  height: 200px;
}
.cursor {
  /* cursor: default; */
  pointer-events: none;
}
.checkbox{
  width: 300px;
  height: 20px;
  /* background-color: aquamarine;. */
  margin-top: -1200px;
  margin-left: 57px;
}
</style>
